<template>
  <div>
    <el-row>
      <div>
        <el-button @click="butclick">默认按钮</el-button>
      </div>
    </el-row>
    <el-row>
      <div style="width='400',height='600'">
        <video
          id="myvideo"
          @click="click"
          controls
          autoplay
          width="100%"
          height="100%"
        ></video>
      </div>
    </el-row>
  </div>
</template>
<script>
import flvjs from "flv.js";

export default {
  data() {
    return {
      player: null,
      playing: false,
    };
  },
  created() {
    if (flvjs.isSupported()) {
      this.player = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        cors: true,
        url: "http://d.ossrs.net/live/livestream.flv",
        // url: "http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.flv",
        // url: "http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.flv",
      });
    }
  },
  mounted() {
    var video = document.querySelector("#myvideo");
    this.player.attachMediaElement(video);
    this.player.load();
  },
  beforeDestroy() {
    this.player.pause();
    this.player.unload();
    this.player.detachMediaElement();
    this.player.destroy();
    this.player = null;
  },
  methods: {
    click() {
      if (this.playing) {
        this.player.pause();
        this.playing = false;
      } else {
        this.player.play();
        this.playing = true;
      }
    },

    butclick() {
      window.open("/baidu/");
    },

    // //play for flv
    // show() {
    //   let video = this.$refs.videoElement; //定义播放路径
    //   if (flvjs.isSupported()) {
    //     this.player = flvjs.createPlayer({
    //       type: result.type == "flv",
    //       url: "rtmp://58.200.131.2:1935/livetv/hunantv",
    //     });
    //   } else {
    //     this.$message.error("不支持的格式");
    //     return;
    //   }
    //   this.player.attachMediaElement(video);
    //   this.player.load();
    //   this.player.play();
    // },
  },
};
</script>